//在线列表组件
Vue.component('online-list', {
    template: '<ul><li v-for="(nick, uid) in list" :data-uid="uid" :key="uid">{{nick}}</li></ul>',
    props: {
        list: {
            required: true,
            type: Object
        },
        onOpen: {
            required: false,
            type: Function
        }
    },
    mounted: function() {
        var self = this;

        $(this.$el).on("click", "li", function() {
            var uid = $(this).data("uid");
            var nick = getNick(self.list[uid]);
            if (self.onOpen) {
                self.onOpen(uid, nick);
            }
        });
    }
});

//近期聊天列表组件
Vue.component('recent-list', {
    template: '<ul><li v-for="(item, index) in list" :class="{\'active\':item.key==current}" v-on:click="switchTo(index)" :key="item.key">'
        + '<div class="recent-nick">{{item.name}}</div><div class="recent-msg">{{item.text}}</div></li></ul>',
    props: {
        list: {
            required: true,
            type: Array
        },
        current: {
            type: String,
            default: null
        },
        onSwitch: {
            required: false,
            type: Function
        }
    },
    methods: {
        switchTo: function(i) {
            var item = this.list[i];

            if (item.key != this.current) {
                this.currentKey = item.key;
	            this.$emit("current-key-change", this.currentKey);
                if (this.onSwitch) {
                    this.onSwitch(item.key, item.name);
                }
            }
        }
    },
	computed: {
		currentKey: function() {
			return this.current;
		}
	},
	mounted: function() {
        var self = this;
		this.currentKey = this.current;
    }
});

//消息列表组件
Vue.component('message-box', {
    template: '<ul class="chat-pop"><component v-for="(item, i) in messages" :is="item.tpl" :item="item" :data-idx="i"></component></ul>',
    props: {
        messages: {
            type: Array,
            default: []
        }
    },
	mounted: function() {
    },
    components: {
        //普通文本消息
        'message-item': {
            template: '<li :class="[\'message\', item.type ? \'message-send\' : \'message-receive\']" :id="item.id">'
                + '<div class="message-head">'
                + '<span class="message-nick">{{item.nick}}</span><span class="message-time">{{item.time}}</span>'
                + '</div><div class="message-content">{{item.content}}</div></li>',
            props: {
                item: {
                    required: true,
                    type: Object
                }
            }
        },
        //小提示
        'tip': {
            template: '<li class="tip"><span>{{item.content}}</span></li>',
            props: {
                item: {
                    required: true,
                    type: Object
                }
            }
        },
	    //分割符
        'split': {
            template: '<li class="split"><span>{{item.content}}</span></li>',
	        props: {
		        item: {
			        required: true,
			        type: Object
		        }
	        }
        }
    }
});